<template>
  <div>
    <div style="width: 90%; text-align: left; margin: 20px;">
      <Power url="/sys/user/insert">
        <el-button type="primary" @click="open_insert_dialog" style="margin-right: 20px;">添加职工</el-button>
      </Power>

      <el-input v-model="table.data.keyword" placeholder="请输入用户名/姓名" style="width: 200px; margin-right: 20px;"></el-input>

      <el-select v-model="table.data.sex" placeholder="请选择" style="margin-right: 20px;">
        <el-option label="男" value="0"></el-option>
        <el-option label="女" value="1"></el-option>
      </el-select>

      <el-date-picker
        v-model="table.data.beginTime"
        type="datetime"
        value-format = "yyyy-MM-dd HH:mm:ss"
        placeholder="选择开始时间">
      </el-date-picker>
       -
      <el-date-picker
        v-model="table.data.endTime"
        type="datetime"
        value-format = "yyyy-MM-dd HH:mm:ss"
        placeholder="选择结束时间">
      </el-date-picker>

      <!-- 搜索按钮 -->
      <el-button icon="el-icon-search" circle @click="searchs"></el-button>

    </div>
    <!-- 职工列表 -->
    <Table ref="myTable" :param="table"></Table>

    <!-- 新增职工的弹出框 -->
    <el-dialog
      title="职工角色"
      :visible.sync="basic.dialogVisible"
      width="30%">

      <!-- 表单区域 -->
      <el-form ref="form" :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入职工用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入职工密码" show-password="true"></el-input>
        </el-form-item>
        <el-form-item label="所属部门">
           <br/>
           <el-select v-model="form.depId" placeholder="请选择所属部门">
              <el-option v-for="dep in deps" :label="dep.depName" :value="dep.id"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入职工姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <br/>
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 表单区域 -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insert_user">新 增</el-button>
        <el-button @click="basic.dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 设置角色的抽屉 -->
    <el-drawer
      title="设置角色"
      :visible.sync="basic.drawer"
      :direction="basic.direction">

      <!-- 角色列表 -->
      <el-checkbox-group v-model="selectRids" style="display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;">
          <el-checkbox v-for="role in roles" :label="role.id" border style="width: 50%; margin: 0px; margin-bottom: 10px;">
            {{role.roleName}}
          </el-checkbox>
      </el-checkbox-group>

      <Power url="/sys/user/updateRoles">
        <el-button type="primary" @click="updateRoles">修改角色</el-button>
      </Power>
    </el-drawer>
  </div>
</template>

<script>
  //自定义的表格组件
  import Table from './Table'

  export default {
    components: {
      Table
    },
    data(){
      return {
        //搜索的关键词
        search:{

        },
        //被选中的角色id
        selectRids:[],
        //需要展示的角色列表
        roles: [],
        //设置用户角色的表单对象
        setRoleForm: {
          //用户id
          uid: ""
        },
        //部门列表
        deps: [],
        //新增职工的表单对象
        form: {
          username: "",
          password: "123456",
          sex: 0
        },
        basic: {
          //弹出框的属性
          dialogVisible: false,
          //抽屉的展示
          drawer: false,
          //抽屉的方向
          direction: "ltr"
        },
        table: {
          //表头
          title: [
            {title:"职工编号", attr:"id"},
            {title:"所属部门", attr:"depId"},
            {title:"用户名", attr:"username"},
            {title:"姓名", attr:"name"},
            {title:"性别", attr:"sex", other: (data) => {
              return data == 0 ? '男' : '女';
            }},
            {title:"入职时间", attr:"createTime"}
          ],
          //请求的url
          url: "/sys/user/list",
          //请求的数据
          data: {},
          //后续的操作按钮
          btns: {
            enable: true,
            //操作列表
            actions: [
              {
                btnName: "设置角色", callable: (val) => {
                  console.log("设置角色：", val);
                  //确定设置权限的角色id
                  this.setRoleForm.uid = val.id;
                  //打开抽屉 （展示权限树 而且 当前角色拥有的权限 要自动勾选）
                  this.basic.drawer = true;
                  //发送ajax请求，去请求权限列表
                  this.$.ajax({
                    url: "/sys/role/queryRolesByUid",
                    data: {
                      uid: this.setRoleForm.uid
                    },
                    success: (data) => {
                      console.log("获得角色列表：",data);
                      this.roles = data;

                      //清空数组
                      this.selectRids = [];
                      //循环获取被选中的角色（当前用户拥有的角色）
                      data.forEach(user => {
                        if(user.checked){
                          this.selectRids.push(user.id);
                        }
                      });
                    }
                  });
                },isShow: (val) => {
                  //超级管理员不显示 设置角色的按钮
                  //权限判断
                  return val.id != 1 && this.$.hasPower('/sys/role/queryRolesByUid');
                }
              }
            ]
          },
          //分页参数
          page: {
            //是否需要开启分页的功能
            enable: true,
            //当前第几页
            pageNum: 1,
            //每页多少行记录
            pageSize: 5
          }
        }
      }
    },
    methods: {
      //打开新增的弹出框
      open_insert_dialog(){
        this.basic.dialogVisible = true;
      },
      //新增职工
      insert_user(){
        this.$.ajax({
          type: "POST",
          url: "/sys/user/insert",
          data: this.form,
          success: (data) => {
            //清空表单
            this.form = {};
            //关闭弹窗
            this.basic.dialogVisible = false;
            //刷新表格
            this.$refs.myTable.request();
          }
        });
      },
      //请求部门列表
      requestDepList(){
        this.$.ajax({
          url: "/sys/dep/list",
          success: (data) => {
            this.deps = data;
          }
        });
      },
      //遍历权限树的集合 - 递归，获取被选中的权限id
      foreachPowerTrees(powerTree){
        if(!powerTree || powerTree.length <= 0){
          return;
        }

        powerTree.forEach(p => {
          if(p.checked){
            this.pids.push(p.id);
          }

          //如果还有子权限
          this.foreachPowerTrees(p.children);
        });
      },
      //修改用户对应的角色
      updateRoles(){
        //设置被选中的角色id数组
        console.log("更改用户的角色：", this.selectRids);

        this.setRoleForm.rids = this.selectRids;

        //ajax发送请求
        this.$.ajax({
          type: "POST",
          url: "/sys/user/updateRoles",
          data: this.setRoleForm,
          success: (data) => {
            this.$message.success("角色修改成功！");
          }
        });
      },
      //搜索
      searchs(){
        console.log("搜索条件", this.search);
        //让表格组件重新发送请求
        //刷新表格
        this.$refs.myTable.request();
      }
    },
    mounted(){
      this.requestDepList();
    }
  }
</script>


<style>
</style>
